<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>SlickGrid example 15: Total rows</title>

    <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />

    <script src="../lib/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="../lib/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>

    <!-- Slickgrid CSS -->
    <link href="../slick.grid.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="../slick.columnpicker.css" media="screen" rel="stylesheet" type="text/css" />

    <!-- Slickgrid JS -->
    <script src="../lib/jquery.event.drag-2.0.custom.js" type="text/javascript"></script>
    <script src="../lib/jquery.cookie-1.0.js" type="text/javascript"></script>
    <script src="../lib/jquery.json-2.2.min.js" type="text/javascript"></script>
    <script src="../slick.grid.js" type="text/javascript"></script>
    <script src="../slick.columnpicker.js" type="text/javascript"></script>
    <script src="../slick.session.js" type="text/javascript"></script>
    <script src="../slick.filter.js" type="text/javascript"></script>
    <script src="../init.js" type="text/javascript"></script>

    <script type="text/javascript">

        // These functions are just for demonstration.

        function randomCity() {
            var cities = ['New York City','Los Angeles','Chicago','Houston','Phoenix','Philadelphia','San Antonio','San Diego','Dallas','San Jose','Detroit','San Francisco','Jacksonville','Indianapolis','Austin','Columbus','Fort Worth','Charlotte','Memphis','Boston','Baltimore','El Paso','Seattle','Denver','Nashville','Milwaukee','Washington','Las Vegas','Louisville','Portland','Oklahoma City','Tucson','Atlanta','Albuquerque','Kansas City','Fresno','Mesa','Sacramento','Long Beach','Omaha','Virginia Beach','Miami','Cleveland','Oakland','Raleigh','Colorado Springs','Tulsa','Minneapolis','Arlington','Honolulu'];
            var k = Math.floor(Math.random() * cities.length);
            return cities[k];
        }

        function zeroPad(number, length) {
            var result = number.toString();
            var pad = length - result.length;
            while (pad > 0) {
                result = '0' + result;
                pad--;
            }
            return result;
        }

        function ampm() {
            return (Math.round(Math.random())) ? 'am' : 'pm';
        }

        function generateTestTotals() {
            return {
                currency: '$' + Math.round(Math.random() * 10000) + '.00',
                percentage: Math.round(Math.random() * 100) + '%',
                ratio: Math.ceil(Math.random() * 100) + ' : ' + Math.ceil(Math.random() * 10)
            }
        }

        function generateTestData(rows) {
            var data = [];
            for (var i = 0; i < rows; i++) {
                data[i] = {
                    id: i,
                    city: randomCity(),
                    shortDate: Math.ceil(Math.random() * 12) + '/' + Math.ceil(Math.random() * 31) + '/200' + Math.ceil(Math.random() * 9),
                    time: Math.ceil(Math.random() * 12) + ':' + zeroPad(Math.ceil((Math.random() * 60) - 1), 2) + ' ' + ampm(),
                    currency: '$' + Math.round(Math.random() * 10000) + '.00',
                    percentage: Math.round(Math.random() * 100) + '%',
                    ratio: Math.ceil(Math.random() * 100) + ' : 1',
                    ip: Math.ceil((Math.random() * 245) + 10) + '.' + Math.ceil((Math.random() * 245) + 10) + '.' + Math.ceil((Math.random() * 245) + 10) + '.' + Math.ceil((Math.random() * 245) + 10)
                };
            }
            return data;
        }

        /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

        var demo_slickgrid = {
            id: 'demoSlickGrid',            // a unique ID for this table, for session handling.
            container: '#demo_slickgrid',   // the existing DOM element that will contain the datagrid. Should have width and height set.
            options: {
                session: true               // Enabled client-side session handling.
            },
            columns: [
                { name: 'City', filter: 'text', sortable: true, minWidth: 150, defaultSort: 'ascending' },
                { name: 'Short Date', field: 'shortDate', sortable: true, minWidth: 100 },
                { name: 'Time', sortable: true, width: 62 },
                { name: 'Currency', filter: 'range', sortable: true, visible: true, width: 60 },
                { name: 'Percentage', filter: 'range', sortable: true, total: 'average', visible: true, width: 60 },
                { name: 'Ratio', filter: 'range', sortable: true, visible: false, width: 60 },
                { name: 'IP Address', field: 'ip', filter: 'text', sortable: true, visible: false, width: 80 }
            ],
            totals: generateTestTotals(),
            data: generateTestData(3000)
        };

        dataGrids.push(demo_slickgrid);

    </script>

</head>

<body>

    <h1>Features added in this fork:</h1>
    <ul>
        <li><strong>Session handling:</strong> Refreshing the page restores column visiibility, order, and default sort.</li>
        <li><strong>Filtering UI:</strong> Min/max ranges are determined automatically.</li>
        <li><strong>Rich sorting library:</strong> Sort algorithms are determined automatically.</li>
        <li><strong>Fixed totals rows:</strong> Can be updated with the Grid.setTotals() method. Filters update totals automatically. Can be displayed in footer and/or header.</li>
        <li><strong>UX improvements:</strong> Column reordering is updated in ColumnPicker. More natural dragging algorithm/threshold used.</strong></li>
    </ul>
    <hr />
    <div id="demo_slickgrid" class="slickgrid" style="width: 100%; height: 500px;"></div>

</body>
</html>
